<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <style>
    .nav {
      width: 100%;
      height: 50px;
      background-color: rgb(255, 255, 255);
      box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
      background-color: skyblue;
    }

    .nav ul {
      list-style: none;
      margin: 0;
      font-size: 0;
    }

    ul li {
      height: 50px;
      display: inline-block;
      /* background-color: aqua; */
      line-height: 50px;
      text-align: center;
      font-size: 16px;

      /* 设置视距 */
      perspective: 300px;
    }

    .box {
      height: 50px;
      position: relative;

      /* 3d*/
      transform-style: preserve-3d;
      transform-origin: 50% 50% -25px;
      transition: transform 0.4s ease-in-out;
    }

    .box:hover {
      transform: rotateX(90deg);
    }

    .box a {
      display: block;
      height: 50px;
      line-height: 50px;
      color: #fff;
      padding: 0px 20px;
      text-decoration: none;
    }

    .normal-status {
      background-color: skyblue;
    }

    .hover-status {
      background-color: orange;

      /* 下方90度折入底部 */
      transform: rotateX(-90deg);
      transform-origin: top center;
    }
  </style>
  <body>
    <div class="nav">
      <ul>
        <li>
          <div class="box">
            <a href="" class="normal-status">首 页</a>
            <a href="" class="hover-status">首 页</a>
          </div>
        </li>
        <li>
          <div class="box">
            <a href="" class="normal-status">产 品</a>
            <a href="" class="hover-status">产 品</a>
          </div>
        </li>
        <li>
          <div class="box">
            <a href="" class="normal-status">工 艺</a>
            <a href="" class="hover-status">工 艺</a>
          </div>
        </li>
        <li>
          <div class="box">
            <a href="" class="normal-status">联系我们</a>
            <a href="" class="hover-status">联系我们</a>
          </div>
        </li>
      </ul>
    </div>
  </body>
</html>
